<template>
  <div class="permission">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <el-button
          type="danger"
          size="default"
          @click="initMenu"
        >初始化菜单</el-button>
      </div>

      <div class="table-holder">
        <el-table
          :data="permissionList"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="title" label="菜单名称" width="180" />
          <el-table-column label="icon" width="100">
            <template slot-scope="scope">
              <i :class="scope.row.icon" />
            </template>
          </el-table-column>
          <el-table-column prop="level" label="等级" width="100" />
          <el-table-column prop="sort" label="排序" width="100" />
          <el-table-column
            prop="permissionValue"
            label="权限标识"
            width="100"
          />
          <el-table-column prop="path" label="路由" width="100" />
          <el-table-column prop="component" label="组件路径" width="200" />
          <el-table-column label="是否可用">
            <template slot-scope="scope">
              <span v-if="scope.row.status===0">禁用</span>
              <span v-if="scope.row.status===1">正常</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { requestAllPermissions, saveInitMenus } from '@/api/auth'
import { asyncRoutes } from '@/router/index'
import _ from 'lodash'
export default {
  data() {
    return {
      // 权限列表
      permissionList: [],
      asyncRoutes
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    // 获取权限列表
    getPermissionList() {
      requestAllPermissions().then((res) => {
        console.log(res)
        this.permissionList = res.data.menus
      })
    },
    addMenu() {},

    // 初始化菜单格式
    reBuildMenuData(routes) {
      for (var i = 0; i < routes.length; i++) {
        var route = routes[i]
        if (route.meta) {
          route.label = route.meta.title
          // 替换component
          route.component = route.meta.componentUrl
          route.title = route.meta.title
          route.icon = route.meta.icon
          // 序列化meta
          route.meta = JSON.stringify(route.meta)
        } else {
          // 如果没有meta 可以跳过
          continue
        }
        if (route.children && route.children.length > 0) {
          this.reBuildMenuData(route.children)
        }
      }
      return routes
    },
    initMenu() {
      this.$confirm('警告！此操作将初始化权限菜单信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          var routes = _.cloneDeep(this.asyncRoutes)
          var menus = this.reBuildMenuData(routes)
          saveInitMenus(menus).then((res) => {
            console.log(res)
            if (res.code === 20000) {
              this.$message({
                type: 'success',
                message: '初始化成功!'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消初始化'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.permission {
}
</style>
